<template>
  <div class="box">
    <img style="width: 100%" src="../../assets/images/登录头像.png" alt="" />
    <div class="Usersand">
      <van-form @submit="login">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button block type="primary" native-type="submit"> 提交 </van-button>
        </div>
      </van-form>
    </div>
    <div class="Forget">
      <span style="float: left" @click="goToAbout">忘记密码</span>
      <span style="float: right" @click="goRegister">暂无账号?立即注册</span>
    </div>
    <van-divider
      style="color: white; width: 270px; margin-left: 15%; font-size: 13px; margin-top: 150px"
      >其他登录方式</van-divider
    >
    <van-icon class="wxdl" size="15px" name="wechat" />
  </div>
</template>

<script>
import axios from '../../request/axios'
import { message } from 'ant-design-vue'
export default {
  data() {
    return {
      username: '',
      password: '',
      error: null
    }
  },
  methods: {
    async login() {
      try {
        const response = await axios.post('http://localhost:3001/api/login', {
          username: this.username,
          password: this.password
        })

        // 检查响应状态码，虽然通常 2xx 都会被认为是成功的，但这里我们明确检查 200
        if (response.status === 200) {
          localStorage.setItem('token', response.data.token)
          localStorage.setItem('name', this.username)
          localStorage.setItem('password', this.password)
          message.success('登录成功！')
          // 设置2秒后跳转
          setTimeout(() => {
            this.$router.push('/home') // 跳到首页
          }, 2000) // 延时2000毫秒（即2秒）
        } else {
          // axios通常会在非2xx时抛出错误
          this.error = '登录成功但服务器返回了非200状态码'
        }
      } catch (error) {
        // 捕获axios抛出的错误
        if (error.response && error.response.status === 404) {
          this.error = '用户未找到或密码错误'
          message.warning('登录失败')
        } else {
          message.warning('登录失败')
        }
      }
    },
    goToAbout() {
      this.$router.push('/forgot')
    },
    goRegister() {
      this.$router.push('/register')
    }
  }
}
</script>
<style scoped>
.box {
  background-color: #3087ea;
}

.Usersand {
  width: 300px;
  height: 200px;
  margin-left: 37px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Forget {
  width: 300px;
  height: 22px;
  font-size: 12px;
  /* background-color: azure; */
  margin: 10px 5px 10px 35px;
  color: white;
}
.wxdl {
  width: 30px;
  height: 30px;
  background-color: white;
  text-align: center;
  line-height: 30px;
  border-radius: 50px;
  color: #3087ea;
  margin-left: 45%;
}
</style>
